import React, { Component } from 'react'
import '../assets/style/loginPage_c.less';
import Header from '../components/Header_c';
import FormInput from '../components/FormInput_c';
import FormBtn from '../components/FormBtn_c';
import axios from '../utils/http'
import { Toast } from 'antd-mobile';
import {connect} from 'react-redux'
import {login} from '../redux/redux_actions'

class LoginPage extends Component {

    state = {
        username: "",
        password: "",
        nickname: ""
    }

    handleChange = (typeName,e) => {
        this.setState({ [typeName]: e.target.value })
    }
    handleClick = async (e) => {
        e.preventDefault()
        if (!this.state.username || !this.state.password) {
            alert('手机号或密码不能为空')
            return
        }
        let params = {
            username: this.state.username,
            password: this.state.password
        }
        const resdata = await axios({
            method: 'post',
            url: "/admin/login",
            data: params
        })
        console.log(resdata.data);
        if (resdata.data.code === 200) {
            Toast.success(resdata.data.msg);
            localStorage.setItem('redtoken', resdata.data.data.token)

            this.props.history.push('/home')
             const action = {
                type: "set",
                value: resdata.data.data.userinfo
            }
            this.props.login(action)
        } else {
            Toast.fail(resdata.data.msg);
        }
       

        // if (res.data.token) {
           

            // this.props.history.push('/home')
        // }
    }
    handleClick2 = () => {
        this.props.history.push('/register')
    }

    render() {
        return (
            <div className="login-page">
                <Header>用户登录</Header>
                <div className="body">
                    <h2>账号密码登录</h2>
                    <form className="login-form">
                        {/* 昵称 */}
                        <FormInput type="text" src="nickname.png" value={this.state.nickname} onChange={(e)=>{this.handleChange('nickname',e)}} placeholder="请输入昵称" />
                        {/* 手机号 */}
                        <FormInput type="text" src="phone.png" value={this.state.username} onChange={(e)=>{this.handleChange('username',e)}} placeholder="请输入手机号" />
                        {/* 密码 */}
                        <FormInput type="password" src="suo.png" value={this.state.password} onChange={(e)=>{this.handleChange('password',e)}} placeholder="请输入密码" />
                        {/* 登录 */}
                        <FormBtn onClick={this.handleClick}>登录</FormBtn>
                        {/* 忘记密码 */}
                        <div className="nav-form">
                            <FormBtn type="ordinary" onClick={this.handleClick2}>没有账号?去注册</FormBtn>&emsp;
                            <FormBtn type="ordinary" onClick={this.handleClick2}>忘记密码?</FormBtn>
                        </div>
                    </form>
                </div>
            </div>
        )
    }
}
export default connect(state=>state.reducer,{login})(LoginPage) 